<template>
  <div style="background: #fff; border-top: 1px solid #e5e5e5;">
    <div class="flex" style="width: 1200px; margin: auto;">
      <div class="container mt-5">
        <div class="row auto_footer">
          <div class="col-sm-2" v-for="(item, index) in navList" :key="index">
            <h3 class="font-16 black db-pointer" @click="gotoRouteHandle(item)">
              {{ item.name }}
            </h3>
            <div
              class="padding-b-5 padding-t-5"
              v-for="(i, index) in item.children"
              :key="index"
            >
              <a class="font-14 black db-pointer" @click="gotoRouteHandle(i)">
                {{ i.name }}
              </a>
            </div>
          </div>
        </div>
      </div>

      <div style="width: 40%; padding: 40px 0 0 20px;">
        <el-image
          style="width: 100%;"
          :src="require('@/assets/img/login_bg2.jpg')"
          fit="fill"
        ></el-image>
      </div>
    </div>
    <div class="footer flex flex-align padding-b-20 padding-t-20">
      <div class="flex flex-align">
        <a class="grey500 font-12 position-r margin-r-20">法律声名</a>
        <a class="grey500 font-12 position-r margin-r-20">版权声明</a>
        <a class="grey500 font-12 position-r margin-r-20">网站地图</a>
      </div>
      <div class="flex flex-align grey500">
        <a class="font-12 grey500" href="#" target="_blank">
          浙ICP备14042843号
        </a>
      </div>
    </div>
    <div class="position-f" style="right: 2%; z-index: 110; top: 50%;">
      <ul class="position-r">
        <li>
          <div class="aimg margin-b-6">
            <el-image
              style="width: 45px; height: 45px; margin-top: 6px;"
              src="https://www.hikvision.com/etc/clientlibs/it/resources/icons/hiknow2/go-top-icon.svg"
              fit="fill"
              @click="scrollToTop"
            ></el-image>
          </div>
          <div
            class="aimg margin-b-6"
            @mouseenter="handleMouseEnter"
            @mouseleave="handleMouseLeave"
          >
            <el-image
              style="
                width: 45px;
                height: 45px;
                line-height: 45px;
                margin-top: 6px;
              "
              src="https://www.hikvision.com/etc/clientlibs/it/resources/icons/hiknow2/go-top-icon.svg"
              fit="fill"
            ></el-image>
            <aside
              class="position-a padding-r-10 padding-l-10 font-18 white margin-r-8"
              style="top: 65px;"
              id="iponeimg"
            >
              400-0032-568
            </aside>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navList: [
        {
          name: '首页',
          id: 0,
          path: '/home',
        },
        {
          name: '其他',
          id: 1,
          children: [
            {
              name: '系统配置',
              id: 3,
              path: '/ListView',
            },
            {
              name: 'eventlog',
              id: 4,
              path: '/eventlog',
            },
          ],
        },
        {
          name: '表格列表',
          id: 4,
          path: '/cockpit',
        },
        {
          name: '组件',
          id: 5,
          path: '/history',
        },
      ],
    }
  },

  methods: {
    gotoRouteHandle(item) {
      if (item.url) {
        this.$router.push({ name: item.url })
      }
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth',
      })
    },
    handleMouseEnter() {
      document.getElementById('iponeimg').style.display = 'block'
    },
    handleMouseLeave() {
      document.getElementById('iponeimg').style.display = 'none'
    },
  },
}
</script>
<style lang="scss" scoped>
.aimg {
  background: #333;
  width: 60px;
  height: 60px;
  text-align: center;

  &:hover {
    background: black;
  }

  aside {
    display: none;
    right: 100%;
    line-height: 60px;
    white-space: nowrap;
    text-overflow: ellipsis;
    top: 0;
    background: #ccb797;
    border-radius: 3px;
  }
}

li {
  list-style: none;
}

.auto_footer {
  width: 80%;
  border-right: 1px solid #eee;
  display: flex;
  justify-content: space-around;
  line-height: 1.45;

  h3:after {
    content: '';
    display: block;
    width: 24px;
    height: 1px;
    background: #c1c1c1;
    margin: 15px 0;
  }
}

.footer {
  background: #000;
  justify-content: space-around;

  a::before {
    content: '';
    left: -12px;
    width: 1px;
    height: 60%;
    top: 20%;
    background: #6e6e6e;
    position: absolute;
  }
}

::v-deep .el-descriptions__body {
  background-color: #f7f7f7;
}
</style>
